<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
	<link rel="stylesheet" href="css/top.css">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
	<script type="text/javascript" src = "js/jquery-3.1.1.min.js">
	</script>
	<script src="js/index.js"></script>
	<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
	<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<title>首页</title>
	<style>
		.swiper-pagination-bullet{
			background-color: rgb(107,107,107);
			width: 25px;
			height: 2px;
			border-radius: 0;
			opacity: 1;
		}
		.swiper-pagination-bullet-active{
			background-color: rgb(227,227,227);
		}
		.swiper-container-horizontal > .swiper-pagination-bullets{
			bottom: 0px;
		}
	</style>
</head>
<body>
	<div>
		<header>
			<div id="top">
				<img src="images/nav_logo_03.png" >
			</div>
		</header>
		<section>
			<div class="jd_banner swiper-container">
					<ul class="image_box swiper-wrapper">
						<li  class="swiper-slide">
							<a href=""><img src="" id="classics"></a>
						</li>
						<li  class="swiper-slide">
							<a href=""><img src="" id="lifetime"></a>
						</li>
						<li  class="swiper-slide">
							<a href=""><img src="" id="classic"></a>
						</li>
						<li  class="swiper-slide">
							<a href=""><img src="" id="constellation"></a>
						</li>
						<li  class="swiper-slide">
							<a href=""><img src="" id="music"></a>
						</li>
					</ul>
					<div class="swiper-pagination"></div>
				</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/30.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=12"><img src="" alt="" class="top_list_img1"></a>
				<a href="html/rose_list.html?id=2079"><img src="" alt="" class="top_list_img2"></a>
				<a href="html/rose_list.html?id=3850"><img src="" alt="" class="top_list_img3"></a>
				<a href="html/rose_list.html?id=445"><img src="" alt="" class="top_list_img4"></a>
				<a href="html/rose_list.html?id=3114"><img src="" alt="" class="top_list_img5"></a>
				<a href="html/rose_list.html?id=518"><img src="" alt="" class="top_list_img6"></a>
				<a href="html/rose_list.html?id=4078"><img src="" alt="" class="top_list_img7"></a>
				<a href="html/rose_list.html?id=248"><img src="" alt="" class="top_list_img8"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/64.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=3843"><img src="" alt="" class="top_list_img9"></a>
				<a href="html/rose_list.html?id=3071"><img src="" alt="" class="top_list_img10"></a>
				<a href="html/rose_list.html?id=4174"><img src="" alt="" class="top_list_img11"></a>
				<a href="html/rose_list.html?id=4132"><img src="" alt="" class="top_list_img12"></a>
				<a href="html/rose_list.html?id=3877"><img src="" alt="" class="top_list_img13"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/41.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=4025"><img src="" alt="" class="top_list_img14"></a>
				<a href="html/rose_list.html?id=3849"><img src="" alt="" class="top_list_img15"></a>
				<a href="html/rose_list.html?id=3805"><img src="" alt="" class="top_list_img16"></a>
				<a href="html/rose_list.html?id=4180"><img src="" alt="" class="top_list_img17"></a>
				<a href="html/rose_list.html?id=4172"><img src="" alt="" class="top_list_img18"></a>
				<a href="html/rose_list.html?id=3245"><img src="" alt="" class="top_list_img19"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/31.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=3562"><img src="" alt="" class="top_list_img20"></a>
				<a href="html/rose_list.html?id=3718"><img src="" alt="" class="top_list_img21"></a>
				<a href="html/rose_list.html?id=3245"><img src="" alt="" class="top_list_img22"></a>
				<a href="html/rose_list.html?id=3991"><img src="" alt="" class="top_list_img23"></a>
				<a href="html/rose_list.html?id=2771"><img src="" alt="" class="top_list_img24"></a>
				<a href="html/rose_list.html?id=3608"><img src="" alt="" class="top_list_img25"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/32.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=4164"><img src="" alt="" class="top_list_img26"></a>
				<a href="html/rose_list.html?id=3150"><img src="" alt="" class="top_list_img27"></a>
				<a href="html/rose_list.html?id=3638"><img src="" alt="" class="top_list_img28"></a>
				<a href="html/rose_list.html?id=3790"><img src="" alt="" class="top_list_img29"></a>
				<a href="html/rose_list.html?id=79"><img src="" alt="" class="top_list_img30"></a>
				<a href="html/rose_list.html?id=3477"><img src="" alt="" class="top_list_img31"></a>
				<a href="html/rose_list.html?id=3787"><img src="" alt="" class="top_list_img32"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/33.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=3817"><img src="" alt="" class="top_list_img33"></a>
				<a href="html/rose_list.html?id=2673"><img src="" alt="" class="top_list_img34"></a>
				<a href="html/rose_list.html?id=3606"><img src="" alt="" class="top_list_img35"></a>
				<a href="html/rose_list.html?id=3604"><img src="" alt="" class="top_list_img36"></a>
				<a href="html/rose_list.html?id=3221"><img src="" alt="" class="top_list_img37"></a>
				<a href="html/rose_list.html?id=3815"><img src="" alt="" class="top_list_img38"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/34.jpg" alt="">
			</div>
			<div class="top_list">
				<a href="html/rose_list.html?id=3940"><img src="" alt="" class="top_list_img39"></a>
				<a href="html/rose_list.html?id=4032"><img src="" alt="" class="top_list_img40"></a>
				<a href="html/rose_list.html?id=3273"><img src="" alt="" class="top_list_img41"></a>
				<a href="html/rose_list.html?id=3687"><img src="" alt="" class="top_list_img42"></a>
				<a href="html/rose_list.html?id=4132"><img src="" alt="" class="top_list_img43"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/35.jpg" alt="">
			</div>
			<div class="top_list1">
				<a href="html/rose_list.html?id=16"><img src="" alt="" class="top_list_img44"></a>
				<a href="html/rose_list.html?id=17"><img src="" alt="" class="top_list_img45"></a>
				<a href="html/rose_list.html?id=41"><img src="" alt="" class="top_list_img46"></a>
				<a href="html/rose_list.html?id=10"><img src="" alt="" class="top_list_img47"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/38.jpg" alt="">
			</div>
			<div class="top_list1">
				<a href="html/rose_list.html?id=14"><img src="" alt="" class="top_list_img48"></a>
				<a href="html/rose_list.html?id=4131"><img src="" alt="" class="top_list_img49"></a>
				<a href="html/rose_list.html?id=3906"><img src="" alt="" class="top_list_img50"></a>
				<a href="html/rose_list.html?id=3594"><img src="" alt="" class="top_list_img51"></a>
				<a href="html/rose_list.html?id=3986"><img src="" alt="" class="top_list_img52"></a>
				<a href="html/rose_list.html?id=3073"><img src="" alt="" class="top_list_img53"></a>
			</div>
		</section>
		<section>
			<div class="top_title">
				<img src="images/36.jpg" alt="">
			</div>
			<div class="top_list">
				<img src="" alt="" class="top_list_img54">
			</div>
		</section>
		<div class="foot">
			<a class="foot_div foot_div1" href="#"><img src="images/首页.png">
			<p>首页</p>
			</a>
			<a class="foot_div"  href="#"><img src="images/分类.png">
			<p>分类</p>
			</a>
			<a class="foot_div"  href="#"><img src="images/喇叭.png">
			<p>热卖</p>
			</a>
			<a class="foot_div"  href="#"><img src="images/购物袋.png">
			<p>购物袋</p>
			</a>
			<a class="foot_div"  href="#"><img src="images/用户.png">
			<p>用户</p>
			</a>
		</div>
	</div>
	<script>
		var swiper = new Swiper('.swiper-container', {
		    loop:true,
		    autoplay:4000,
		    pagination: '.swiper-pagination',
		    paginationClickable: true,
		    nextButton: '.swiper-button-next',
        	prevButton: '.swiper-button-prev',
        	// spaceBetween: 30,
        	centeredSlides: true,
        	autoplayDisableOnInteraction: false
		});
	</script>
</body>
</html>